<template>
  <div class="activity-container">
    <div class="head">
      <union-head :leftIcon="leftIcon" :content="title" @leftClick="goBack"></union-head>
    </div>
    <div class="title">
      <span>生活精选</span>
    </div>
    <div class="menu-list">
      <div v-for="(menu) in menus" :key="menu.name" class="menu">
        <div class="icon">
          <img class="menu-icon" :src="menu.url">
        </div>
        <div class="name">
            <span>
              {{ menu.name }}
            </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import UnionHead from '../../components/union-head.vue'
  export default {
    name: 'life',
    components: {
      UnionHead
    },
    data () {
      return {
        menus: '',
        title: '生活便利',
        leftIcon: 'icon-ali-back'
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init () {
        this.$api.get('static/data.json', null, response => {
          this.menus = response.data.menuList
        })
      },
      goBack () {
        this.$router.go(-1)
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
@import "life.styl"
</style>
